TypeScript Overtollige Eigenschapcontroles: Versterk de Typeveiligheid van uw Objecten

            
interface User {
  name: string;
  age: number;
}

const newUser: User = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com' // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'email' bestaat niet in type 'User'.
};

            

              
                Copy
              
            
          

            
interface Product {
  id: number;
  name: string;
}

function displayProduct(product: Product): void {
  console.log(`Product ID: ${product.id}, Name: ${product.name}`);
}

displayProduct({
  id: 101,
  name: 'Laptop',
  price: 1200 // Fout: Argument van type '{ id: number; name: string; price: number; }' is niet toewijsbaar aan parameter van type 'Product'.
             // Object literal mag alleen bekende eigenschappen specificeren, en 'price' bestaat niet in type 'Product'.
});

            

              
                Copy
              
            
          

            
interface Config {
  timeout: number;
}

function setupConfig(config: Config) {
  console.log(`Timeout set to: ${config.timeout}`);
}

const userProvidedConfig = {
  timeout: 5000,
  retries: 3 // Deze 'retries' eigenschap is een overtollige eigenschap volgens 'Config'
};

setupConfig(userProvidedConfig); // Geen fout!

// Hoewel userProvidedConfig een extra eigenschap heeft, wordt de controle overgeslagen
// omdat het geen object literal is die direct wordt doorgegeven.
// TypeScript controleert het type van userProvidedConfig zelf.
// Als userProvidedConfig was gedeclareerd met het type Config, zou er eerder een fout optreden.
// Echter, als het als 'any' of een breder type is gedeclareerd, wordt de fout uitgesteld.

// Een preciezere manier om de omzeiling te tonen:
let anotherConfig;

if (Math.random() > 0.5) {
  anotherConfig = {
    timeout: 1000,
    host: 'localhost' // Overtollige eigenschap
  };
} else {
  anotherConfig = {
    timeout: 2000,
    port: 8080 // Overtollige eigenschap
  };
}

setupConfig(anotherConfig as Config); // Geen fout vanwege type-assertie en omzeiling

// De sleutel is dat 'anotherConfig' geen object literal is op het moment van toewijzing aan setupConfig.
// Als we een tussenliggende variabele hadden getypeerd als 'Config', zou de initiële toewijzing mislukken.

// Voorbeeld van een tussenliggende variabele:
let intermediateConfig: Config;

intermediateConfig = {
  timeout: 3000,
  logging: true // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'logging' bestaat niet in type 'Config'.
};

            

              
                Copy
              
            
          

            
interface Settings {
  theme: 'dark' | 'light';
}

const mySettings = {
  theme: 'dark',
  fontSize: 14 // Overtollige eigenschap
} as Settings;

// Geen fout hier vanwege de type-assertie.
// We vertellen TypeScript: "Geloof me, dit object voldoet aan Settings."
console.log(mySettings.theme);
// console.log(mySettings.fontSize); // Dit zou een runtime-fout veroorzaken als fontSize er niet echt was.

            

              
                Copy
              
            
          

            
interface FlexibleObject {
  id: number;
  [key: string]: any; // Staat elke string-key met elke waarde toe
}

const flexibleItem: FlexibleObject = {
  id: 1,
  name: 'Widget',
  version: '1.0.0'
};

// Geen fout omdat 'name' en 'version' zijn toegestaan door de indexsignatuur.
console.log(flexibleItem.name);

            

              
                Copy
              
            
          

            
interface BaseConfig {
  host: string;
}

interface ExtendedConfig extends BaseConfig {
  port: number;
}

const defaultConfig: BaseConfig = {
  host: 'localhost'
};

const userConfig = {
  port: 8080,
  timeout: 5000 // Overtollige eigenschap ten opzichte van BaseConfig, maar verwacht door het samengevoegde type
};

// 'Spreading' naar een nieuwe object literal die voldoet aan ExtendedConfig
const finalConfig: ExtendedConfig = {
  ...defaultConfig,
  ...userConfig
};

// Dit is over het algemeen oké omdat 'finalConfig' is gedeclareerd als 'ExtendedConfig'
// en de eigenschappen overeenkomen. De controle vindt plaats op het type van 'finalConfig'.

// Laten we een scenario bekijken waarin het *wel* zou mislukken:

interface SmallConfig {
  key: string;
}

const data1 = { key: 'abc', value: 123 }; // 'value' is hier extra
const data2 = { key: 'xyz', status: 'active' }; // 'status' is hier extra

// Poging tot toewijzing aan een type dat geen extra's toestaat

// const combined: SmallConfig = {
//   ...data1, // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'value' bestaat niet in type 'SmallConfig'.
//   ...data2  // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'status' bestaat niet in type 'SmallConfig'.
// };

// De fout treedt op omdat de object literal gevormd door de spread-syntaxis
// eigenschappen ('value', 'status') bevat die niet aanwezig zijn in 'SmallConfig'.

// Als we een tussenliggende variabele met een breder type maken:

const temp: any = {
  ...data1,
  ...data2
};

// Vervolgens toewijzen aan SmallConfig, wordt de overtollige eigenschapcontrole omzeild bij het aanmaken van de initiële literal,
// maar de typecontrole bij de toewijzing kan nog steeds plaatsvinden als het type van temp strikter wordt afgeleid.
// Echter, als temp 'any' is, vindt er geen controle plaats tot de toewijzing aan 'combined'.

// Laten we het begrip van spread met overtollige eigenschapcontroles verfijnen:
// De controle vindt plaats wanneer de object literal die door de spread-syntaxis wordt gemaakt, wordt toegewezen
// aan een variabele of wordt doorgegeven aan een functie die een specifieker type verwacht.

interface SpecificShape { 
  id: number;
}

const objA = { id: 1, extra1: 'hello' };
const objB = { id: 2, extra2: 'world' };

// Dit zal mislukken als SpecificShape 'extra1' of 'extra2' niet toestaat:
// const merged: SpecificShape = {
//   ...objA,
//   ...objB
// };

// De reden dat het mislukt, is dat de spread-syntaxis effectief een nieuwe object literal creëert.
// Als objA en objB overlappende sleutels hadden, zou de laatste winnen. De compiler
// ziet deze resulterende literal en controleert deze tegen 'SpecificShape'.

// Om het werkend te krijgen, heeft u mogelijk een tussenstap of een meer permissief type nodig:

const tempObj = {
  ...objA,
  ...objB
};

// Nu, als tempObj eigenschappen heeft die niet in SpecificShape staan, zal de toewijzing mislukken:
// const mergedCorrected: SpecificShape = tempObj; // Fout: Object literal mag alleen bekende eigenschappen specificeren...

// De sleutel is dat de compiler de vorm van de te vormen object literal analyseert.
// Als die literal eigenschappen bevat die niet in het doeltype zijn gedefinieerd, is het een fout.

// Het typische gebruiksscenario voor spread-syntaxis met overtollige eigenschapcontroles:

interface UserProfile {
  userId: string;
  username: string;
}

interface AdminProfile extends UserProfile {
  adminLevel: number;
}

const baseUserData: UserProfile = {
  userId: 'user-123',
  username: 'coder'
};

const adminData = {
  adminLevel: 5,
  lastLogin: '2023-10-27'
};

// Dit is waar de overtollige eigenschapcontrole relevant is:
// const adminProfile: AdminProfile = {
//   ...baseUserData,
//   ...adminData // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'lastLogin' bestaat niet in type 'AdminProfile'.
// };

// De object literal gemaakt door de spread heeft 'lastLogin', wat niet in 'AdminProfile' staat.
// Om dit op te lossen, moet 'adminData' idealiter voldoen aan AdminProfile of moet de overtollige eigenschap worden afgehandeld.

// Gecorrigeerde aanpak:
const validAdminData = {
  adminLevel: 5
};

const adminProfileCorrect: AdminProfile = {
  ...baseUserData,
  ...validAdminData
};

console.log(adminProfileCorrect.userId);
console.log(adminProfileCorrect.adminLevel);

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
}

interface UserWithMetadata extends UserProfile {
  metadata: {
    [key: string]: any;
  };
}

// Of gebruikelijker met een type alias en rest-syntaxis:
type UserProfileWithMetadata = UserProfile & {
  [key: string]: any;
};

const user1: UserProfileWithMetadata = {
  id: 1,
  name: 'Bob',
  email: 'bob@example.com',
  isAdmin: true
};

// Geen fout, aangezien 'email' en 'isAdmin' worden opgevangen door de indexsignatuur in UserProfileWithMetadata.
console.log(user1.email);
console.log(user1.isAdmin);

// Een andere manier met rest-parameters in een typedefinitie:
interface ConfigWithRest {
  apiUrl: string;
  timeout?: number;
  // Vang alle andere eigenschappen op in 'extraConfig'
  [key: string]: any;
}

const appConfig: ConfigWithRest = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  featureFlags: {
    newUI: true,
    betaFeatures: false
  }
};

console.log(appConfig.featureFlags);

            

              
                Copy
              
            
          

            
interface Employee {
  employeeId: string;
  department: string;
}

function processEmployeeData(data: Employee & { [key: string]: any }) {
  const { employeeId, department, ...otherDetails } = data;

  console.log(`Employee ID: ${employeeId}`);
  console.log(`Department: ${department}`);
  console.log('Other details:', otherDetails);
  // otherDetails zal alle eigenschappen bevatten die niet expliciet zijn gedestructureerd,
  // zoals 'salary', 'startDate', etc.
}

const employeeInfo = {
  employeeId: 'emp-789',
  department: 'Engineering',
  salary: 90000,
  startDate: '2022-01-15'
};

processEmployeeData(employeeInfo);

// Zelfs als employeeInfo aanvankelijk een extra eigenschap had, wordt de overtollige eigenschapcontrole
// omzeild als de functiesignatuur dit accepteert (bijv. met een indexsignatuur).
// Als processEmployeeData strikt getypeerd was als 'Employee', en employeeInfo 'salary' had,
// zou er een fout optreden ALS employeeInfo een direct doorgegeven object literal was.
// Maar hier is employeeInfo een variabele, en het type van de functie kan omgaan met extra's.

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
  email?: string; // Optionele e-mail
}

const userWithEmail: UserProfile = {
  id: 2,
  name: 'Charlie',
  email: 'charlie@example.com'
};

const userWithoutEmail: UserProfile = {
  id: 3,
  name: 'David'
};

// Als we een eigenschap proberen toe te voegen die niet in UserProfile staat:
// const userWithExtra: UserProfile = {
//   id: 4,
//   name: 'Eve',
//   phoneNumber: '555-1234'
// }; // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'phoneNumber' bestaat niet in type 'UserProfile'.

            

              
                Copy
              
            
          

            
interface ProductConfig {
  id: string;
  version: string;
}

// Stel je voor dat dit afkomstig is van een externe bron of een minder strikte module
const externalConfig = {
  id: 'prod-abc',
  version: '1.2',
  debugMode: true // Overtollige eigenschap
};

// Als u weet dat 'externalConfig' altijd 'id' en 'version' zal hebben en u het wilt behandelen als ProductConfig:
const productConfig = externalConfig as ProductConfig;

// Deze assertie omzeilt de overtollige eigenschapcontrole op `externalConfig` zelf.
// Echter, als u een object literal direct zou doorgeven:

// const productConfigLiteral: ProductConfig = {
//   id: 'prod-xyz',
//   version: '2.0',
//   debugMode: false
// }; // Fout: Object literal mag alleen bekende eigenschappen specificeren, en 'debugMode' bestaat niet in type 'ProductConfig'.

            

              
                Copy
              
            
          

            
interface Shape {
  kind: 'circle' | 'square';
}

interface Circle extends Shape {
  kind: 'circle';
  radius: number;
}

interface Square extends Shape {
  kind: 'square';
  sideLength: number;
}

function calculateArea(shape: Shape) {
  if (shape.kind === 'circle') {
    // TypeScript weet hier dat 'shape' een Circle is
    console.log(Math.PI * shape.radius ** 2);
  } else if (shape.kind === 'square') {
    // TypeScript weet hier dat 'shape' een Square is
    console.log(shape.sideLength ** 2);
  }
}

const circleData = {
  kind: 'circle' as const, // Gebruik van 'as const' voor letterlijke type-inferentie
  radius: 10,
  color: 'red' // Overtollige eigenschap
};

// Wanneer doorgegeven aan calculateArea, verwacht de functiesignatuur 'Shape'.
// De functie zelf zal 'kind' correct benaderen.
// Als calculateArea direct 'Circle' verwachtte en circleData
// als object literal ontving, zou 'color' een probleem zijn.

// Laten we de overtollige eigenschapcontrole illustreren met een functie die een specifiek subtype verwacht:

function processCircle(circle: Circle) {
  console.log(`Processing circle with radius: ${circle.radius}`);
}

// processCircle(circleData); // Fout: Argument van type '{ kind: "circle"; radius: number; color: string; }' is niet toewijsbaar aan parameter van type 'Circle'.
                         // Object literal mag alleen bekende eigenschappen specificeren, en 'color' bestaat niet in type 'Circle'.

// Om dit op te lossen, kunt u destructuring gebruiken of een meer permissief type voor circleData:

const { color, ...circleDataWithoutColor } = circleData;
processCircle(circleDataWithoutColor);

// Of definieer circleData om een breder type op te nemen:

const circleDataWithExtras: Circle & { [key: string]: any } = {
  kind: 'circle',
  radius: 15,
  color: 'blue'
};
processCircle(circleDataWithExtras); // Nu werkt het.

            

              
                Copy